<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--指定IE版本-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置移动设备屏幕宽度与可视区域一样-->
    <title>回忆相册</title> <!--设置页面标题-->
</head>
<link rel="stylesheet" href="./font/iconfont.css"> <!--引入外部的CSS文件-->
<link rel="stylesheet" href="./css/style.css">

<body>
    <div id="box"><!-- 主体盒子-->
        <div class="subject_heading_box"> <!--主要标题盒子-->

            <h2>回忆相册</h2> <!--页面主标题-->
            <div> <!--分类标签-->
                <span class="classification_background">生活</span>
                <span class="classification_background">美食</span>
                <span class="classification_background">旅行</span>
                <span class="classification_background">校园</span>
            </div>
            <div>
                <div>
                    <div contentEditable="true" id="search" placeholder="输入您记忆。。。" maxlength="10"
                    onkeydown="if(event.keyCode===13){event.preventDefault();}" oninput="limitText(this)">
                        <span class="iconfont icon-wxbsousuotuiguang"></span> <!--搜索图标-->
                    </div>
                    <button>回忆</button> <!--搜索按钮-->
                </div>

            </div>
        </div>
        <div class="subject_heading_box">


        </div>
    </div>
</body>
<script src="./js/data.js"></script>
<script src="./js/script.js"></script>

<script>
    const subjectHeadingBoxSpans = document.querySelectorAll('.subject_heading_box>div>span'); // 获取分类标签元素
    const search = document.getElementById('search');

    subjectHeadingBoxSpans.forEach(function (span) { // 为每个分类标签添加点击事件
        span.addEventListener('click', function () {
            this.classList.toggle('click_style'); // 切换样式
        });
    });


    search.addEventListener('mouseenter', () => { // 悬浮

        search.innerHTML = '';
        // 使输入框获取焦点
        search.focus();
    });

    search.addEventListener('mouseleave', () => {// 离开
        search.innerHTML = '<span class="iconfont icon-wxbsousuotuiguang"></span>';

        // 使输入框失去焦点
        search.blur();
    });


    function limitText(element) { //限制输入字数函数

        element.addEventListener('input', function () {

            if (element.textContent.length > 10) {
                // 超过了 10 个字符，禁止继续输入
                element.textContent = element.textContent.slice(0, 10);
            }

            if (element.textContent.trim() === '') {
                // 输入框为空，添加图标
                element.innerHTML = '<span class="iconfont icon-wxbsousuotuiguang"></span>';

            }

        });
    }
</script>


</html>